<template>
  <PrintBox
      :printRow="printList"
      :isVertical="false"
      :isPageSize="false"
      id="printBoxRegister"
    >
      <template slot="title" slot-scope="scope">
        <div style="margin-bottom: 40px">设备情况登记表 STET/B/20-1</div>
      </template>
      <template slot-scope="scope">
        <!-- 表格  class  table-page  必须-->
        <table
          style="border-collapse: collapse; table-layout: fixed; width: 100%"
          border="1"
          cellspacing="0"
          class="table-page"
          :isVertical="false"
        >
          <tr style="height: 16mm">
            <td>设备名称</td>
            <td colspan="2">{{ scope.item.deviceName }}</td>
            <td>设备编号</td>
            <td>{{ scope.item.deviceCode }}</td>
            <td colspan="2" rowspan="4">
              <img
                style="width: 280px; height: 250px;object-fit: cover"
                :src="$VUE_APP_IMG_API+scope.item.image"
              ></img>
            </td>
          </tr>
          <tr style="height: 16mm">
            <td>规格编号</td>
            <td colspan="2">{{ scope.item.spec }}</td>
            <td>出厂编号</td>
            <td>{{ scope.item.code }}</td>
          </tr>
          <tr style="height: 16mm">
            <td>制造厂商</td>
            <td colspan="2">
              {{ scope.item.manufacturer }}
              <!-- {{
                checkDict(
                  dict.type.sys_manufacturer_list,
                  scope.item.manufacturer
                )
              }} -->
            </td>
            <td>出厂日期</td>
            <td>{{ scope.item.factoryDate }}</td>
          </tr>
          <tr style="height: 16mm">
            <td>供应商</td>
            <td colspan="2">{{ scope.item.supplierName }}</td>
            <td>联系方式</td>
            <td>{{ scope.item.phone }}</td>
          </tr>
          <tr style="height: 16mm">
            <td>移交附件</td>
            <td colspan="3">{{ scope.item.turnAttachment||''}}</td>
            <td>允许操作人员</td>
            <td colspan="2">
              {{ scope.item.operUserName }}
            </td>
          </tr>
          <tr style="height: 16mm">
            <td>设备用途</td>
            <td colspan="3">{{ scope.item.useInfo }}</td>
            <td>管理人</td>
            <td colspan="2">{{ scope.item.managerUserName }}</td>
          </tr>
          <tr style="height: 16mm">
            <td>操作规程</td>
            <td colspan="2">
              <div style="text-align: center;display: flex;align-items: center;">
                <input
                  type="checkbox"
                  :checked="scope.item.operStandard == 0"
                />有，受控编号{{ scope.item.standardCode }}
              </div>
              <div style="text-align: center;display: flex; align-items: center;">
                <input
                  type="checkbox"
                  :checked="scope.item.operStandard == 1"
                />无
              </div>
            </td>
            <td>操作视频</td>
            <td>
              <div style="text-align: center;display: flex;
    align-items: center;justify-content: center;">
                <input :checked="scope.item.isVideo == 0" type="checkbox" />有
              </div>
              <div style="text-align: center;display: flex;
    align-items: center;justify-content: center;">
                <input :checked="scope.item.isVideo == 1" type="checkbox" />无
              </div>
            </td>
            <td style="width: 10px">校验/计量检定周期</td>
            <td>{{ scope.item.checkPeriod }}月</td>
          </tr>
          <tr style="height: 16mm">
            <td>维护保养内容</td>
            <td colspan="2">{{ scope.item.careContent }}</td>
            <td>维护保养周期</td>
            <td>{{ scope.item.carePeriod }}月</td>
            <td>溯源方式</td>
            <td>
              {{
                checkDict(dict.type.sys_trace_method, scope.item.traceMethod)
              }}
            </td>
          </tr>
          <tr style="height: 16mm">
            <td>测量范围</td>
            <td colspan="2">{{ scope.item.checkScope }}</td>
            <td>扩展不确定度/最大允差/准确度等级</td>
            <td>{{ scope.item.checkLevel }}</td>
            <td>分度值</td>
            <td>{{ scope.item.scaleValue }}</td>
          </tr>
          <tr style="height: 16mm">
            <td>精度</td>
            <td colspan="2">{{ scope.item.scale }}</td>
            <td>所属部门</td>
            <td>{{ scope.item.deptName }}</td>
            <td>位置</td>
            <td>{{ checkDict(dict.type.sys_site_list, scope.item.site) }}</td>
          </tr>
        </table>
        <!-- 底部信息位置 -->
        <div class="page-bottom" style="page-break-after: always">
          <div class="desc">注：本表格自2021年6月1日起生效</div>
        </div></template
      >
      </PrintBox
    >
</template>
<script>
import printStyle from "@/utils/print.js";
import {  deviceInfo } from "@/api/device/device.js";

export default {
  dicts: ["sys_manufacturer_list", "sys_site_list", "sys_trace_method"],

  data() {
    return {
      printList: [],
      formData: {},
    };
  },
  methods: {
    getinfo(id) {
      return deviceInfo(id).then((response) => {
        this.formData = response.data;
      });
    },

    async printBox(e) {
      await this.getinfo(e);
      //infos  勾选的数据 如果有勾选就打印勾选。
      this.printList = [this.formData];
      setTimeout(() => {
        document.title = "设备情况登记表 STET/B/20-1";
        this.$print({
          printable: "printBoxRegister", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          },
        });
      }, 500);
    },
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
  },
};
</script>
